<template>
  <div class="flowManageTop">
    <div class="left space-x-10px">
      <el-icon
        class="iconfont xfv-icon-back"
        style="cursor: pointer"
        @click="backFunc"
      />
      <el-divider direction="vertical" />
      <span class="scene-manage-title" :title="props.name">{{
        props.name
      }}</span>
    </div>
  </div>

</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  name: {
    default: function () {
      return null;
    },
    type: String,
  },
});
const backFunc = () => {
  router.back();
};
</script>
<style lang="scss" scoped>
.flowManageTop {
  background-color: #ffffff;
  color: #e1efff;
  display: flex;
  align-items: center;
  height: 50px;
  .xfv-icon-back {
    color: #5b6775;
  }
  .scene-manage-title {
    display: inline-block;
    width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 16px;
    line-height: 1;
    color: #5b6775;
  }
  .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .iconfont,
  .el-icon {
    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
.flowManageTop {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 10px;
}

.btns-right {
  display: flex;
  margin-left: auto;
  height: 50px;
  align-items: center;
}
</style>
